<template>
  <div class="app-container">
    <el-table
      v-loading="loading"
      :data="scoreList"
    >
      <el-table-column show-overflow-tooltip label="模式" align="center" prop="name"/>
      <el-table-column show-overflow-tooltip label="级别配置" align="center" prop="courseName">
        <template slot-scope="scope">
          <div v-if="scope.row.type==1">
            及格分数{{ scope.row.score }}
          </div>
          <div v-if="scope.row.type==2">
            优秀: ≥{{ scope.row.firstScoreStart }}
            良好:{{ scope.row.secondScoreStart - 0 + 1 }}-{{ scope.row.firstScoreStart }}
            及格:{{ scope.row.thirdScoreStart - 0 + 1 }}-{{ scope.row.secondScoreStart }}
            不及格: ≤{{ scope.row.thirdScoreStart }}
          </div>
          <div v-if="scope.row.type==3">
            每{{ scope.row.studyTime }}学时算作{{ scope.row.score }}学分
          </div>
        </template>
      </el-table-column>
      >
      <el-table-column label="状态" align="center" prop="principalName">
        <template slot-scope="scope">
          <el-switch
            :disabled="scope.row.status==1"
            v-model="scope.row.status"
            @change="updateHandle(scope.row)"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="0"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="120">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleEdit(scope.row)"
          >编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      title="编辑"
      :visible.sync="scoreDialog"
      width="560px"
      @close="handleClose"
    >
      <el-form ref="form" v-if="scoreDialogForm.type==1" :model="scoreDialogForm" :rules="rules1" label-width="80px">
        <el-form-item label="及格分数" prop="score">
          <el-input oninput="value=value.replace(/^-1|[^0-9]/g,''); if(parseInt(value,10) > 100) value = '100';" class="input_type"
                    v-model="scoreDialogForm.score" placeholder="请输入及格分数"
          ></el-input>
        </el-form-item>
      </el-form>
      <el-form ref="form" v-if="scoreDialogForm.type==2" :model="scoreDialogForm" :rules="rules2" label-width="100px">
        <el-form-item label="优秀分数" prop="firstScoreStart">
          <el-input oninput="value=value.replace(/^0|[^0-9]/g,''); if(parseInt(value,10) > 150) value = '149';" class="input_width"
                    v-model="scoreDialogForm.firstScoreStart" placeholder="请输入优秀分数"
          ></el-input>
          <div class="text"> ≤ 分数 ≤</div>
          <div style="width: 150px;text-align: center">100</div>
        </el-form-item>
        <el-form-item label="良好分数" prop="secondScoreStart">
          <el-input oninput="value=value.replace(/^0|[^0-9]/g,'')" class="input_width" v-model="scoreDialogForm.secondScoreStart"
                    placeholder="请输入良好分数"
          ></el-input>
          <div class="text"> ≤ 分数 <</div>
          <el-form-item prop="secondScoreEnd">
            <el-input disabled oninput="value=value.replace(/^0|[^0-9]/g,'')" class="input_width" v-model="scoreDialogForm.firstScoreStart"
                      placeholder="请输入良好分数"
            ></el-input>
          </el-form-item>
        </el-form-item>
        <el-form-item label="及格分数" prop="thirdScoreStart">
          <el-input oninput="value=value.replace(/^0|[^0-9]/g,'')" class="input_width" v-model="scoreDialogForm.thirdScoreStart"
                    placeholder="请输入及格分数"
          ></el-input>
          <div class="text"> ≤ 分数 <</div>
          <el-form-item prop="thirdScoreEnd">
            <el-input disabled oninput="value=value.replace(/^0|[^0-9]/g,'')" class="input_width" v-model="scoreDialogForm.secondScoreStart"
                      placeholder="请输入及格分数"
            ></el-input>
          </el-form-item>
        </el-form-item>
        <el-form-item label="不及格分数" prop="fourthScoreStart">
          <div style="width: 150px;text-align: center">0</div>
          <div class="text"> ≤ 分数 <</div>
          <el-input disabled oninput="value=value.replace(/[^0-9]|^0+(?!$)/g,'')" class="input_width"
                    v-model="scoreDialogForm.thirdScoreStart" placeholder="请输入不及格分数"
          ></el-input>
        </el-form-item>
      </el-form>
      <el-form ref="form" v-if="scoreDialogForm.type==3" :model="scoreDialogForm" :rules="rules3" label-width="80px">
        <el-form-item label="学时" prop="studyTime">
          <el-input oninput="value=value.replace(/^0|[^0-9]/g,'')" class="input_type" v-model="scoreDialogForm.studyTime"
                    placeholder="请输入学时"
          ></el-input>
        </el-form-item>
        <el-form-item label="学分" prop="score">
          <el-input oninput="value=value.replace(/^0|[^0-9]/g,'')" class="input_type" v-model="scoreDialogForm.score"
                    placeholder="请输入学分"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getPost_school, updatePost_school } from '@/api/schoolOrganization/schoolInfo'

export default {
  name: 'scoreAllocation',
  data() {
    return {
      activeName: '0',
      loading: false,
      scoreDialog: false,
      scoreDialogForm: {},
      schoolInfo: {},
      postList: [],
      scoreList: [
        {
          type: 1,
          name: '百分制',
          score: '60',
          status: 1
        },
        {
          type: 2,
          name: '优良等级',
          firstScoreStart: 90,
          secondScoreStart: 80,
          thirdScoreStart: 60,
          status: 0
        },
        {
          type: 3,
          name: '学分制',
          score: 1,
          studyTime: 30,
          status: 0
        }
      ],
      rules1: {
        score: [
          { required: true, message: '请输入及格分数', trigger: 'blur' }
        ]
      },
      rules2: {
        firstScoreStart: [
          { required: true, message: '请输入优秀分数', trigger: 'blur' }
        ],
        secondScoreStart: [
          { required: true, message: '请输入良好分数', trigger: 'blur' }
        ],
        thirdScoreStart: [
          { required: true, message: '请输入及格分数', trigger: 'blur' }
        ]
      },
      rules3: {
        studyTime: [
          { required: true, message: '请输入学时', trigger: 'blur' }
        ],
        score: [
          { required: true, message: '请输入学分', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    async getInfo() {
      let res = await getPost_school()
      const { code, data } = res
      if (code == 200) {
        this.schoolInfo = data
        let scoreGroup = data.excellentLevelMarkConfig ? JSON.parse(data.excellentLevelMarkConfig) : [90, 75, 60]
        let scoreArr = data.creditMarkConfig ? data.creditMarkConfig.split('|') : [1, 30]
        this.scoreList = [
          {
            type: 1,
            name: '百分制',
            score: data.hundredMarkConfig ? data.hundredMarkConfig : '60',
            status: data.gradeType == 1 ? 1 : 0
          },
          {
            type: 2,
            name: '优良等级',
            firstScoreStart: scoreGroup[0],
            secondScoreStart: scoreGroup[1],
            thirdScoreStart: scoreGroup[2],
            status: data.gradeType == 2 ? 1 : 0
          },
          {
            type: 3,
            name: '学分制',
            score: scoreArr[1],
            studyTime: scoreArr[0],
            status: data.gradeType == 3 ? 1 : 0
          }
        ]
      }
    },
    updateHandle(row) {
      for (const scoreListElement of this.scoreList) {
        if (row.type == scoreListElement.type) {
          scoreListElement.status = row.status
        } else {
          scoreListElement.status = row.status == 1 ? 0 : 1
        }
      }
      this.updateSchoolInfo()
    },
    handleClose() {
      this.scoreDialog = false
      this.scoreDialogForm = {}
      this.$refs['form'].resetFields()
    },
    handleSave() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          let res = this.validateScoreRanges(this.scoreDialogForm)
          if (!res) {
            return
          }
          this.scoreList.forEach((item, index) => {
            if (item.type == this.scoreDialogForm.type) {
              this.scoreList[index] = this.scoreDialogForm
            }
          })
          this.updateSchoolInfo('close')
        } else {
          return false
        }
      })
    },
    validateScoreRanges(obj) {
      console.log(obj)
      if ((obj.secondScoreStart - 0) >= (obj.firstScoreStart - 0)) {
        this.$modal.msgWarning('请检查良好分数的区间')
        return false
      }
      if ((obj.thirdScoreStart - 0) >= (obj.secondScoreStart - 0)) {
        this.$modal.msgWarning('请检查及格分数的区间')
        return false
      }
      return true
    },
    handleEdit(row) {
      this.scoreDialogForm = row
      this.scoreDialog = true
    },
    getList() {

    },
    async updateSchoolInfo(type) {
      for (const scoreElement of this.scoreList) {
        if (scoreElement.type == 1) {
          this.schoolInfo.hundredMarkConfig = scoreElement.score
        }
        if (scoreElement.type == 2) {
          this.schoolInfo.excellentLevelMarkConfig = JSON.stringify([scoreElement.firstScoreStart, scoreElement.secondScoreStart, scoreElement.thirdScoreStart])
        }
        if (scoreElement.type == 3) {
          this.schoolInfo.creditMarkConfig = `${scoreElement.studyTime}|${scoreElement.score}`
        }
        if (scoreElement.status == 1) {
          this.schoolInfo.gradeType = scoreElement.type
        }
      }
      const loading = this.$loading({
        lock: true,
        text: '正在配置...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      console.log(this.schoolInfo, 'this.schoolInfo')
      let res = await updatePost_school(this.schoolInfo)
      const { code } = res
      if (code == 200) {
        loading.close()
        if (type == 'close') {
          this.$modal.msgSuccess('修改成功')
          this.scoreDialog = false
        } else {
          this.$modal.msgSuccess('配置成功')
        }
        this.getInfo()
      } else {
        loading.close()
      }
    }
  }
}
</script>

<style scoped lang="scss">
.input_width {
  width: 150px;
}

.input_type {
  width: 260px;
}

.text {
  margin: 0 10px;
}

::v-deep .el-form-item__content {
  display: flex;
}
</style>
